<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>SocketIO 全接口调试器</title>
  <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
  <style>
    body { font-family: Arial; margin: 20px; }
    textarea { width: 100%; height: 200px; font-family: monospace; }
    select, button { font-size: 16px; padding: 5px; margin-right: 10px; }
    pre { background-color: #f2f2f2; padding: 10px; max-height: 300px; overflow-y: auto; }
  </style>
</head>
<body>
  <h2>SocketIO 接口调试器</h2>

  <label>选择 Action:</label>
  <select id="actionSelect" onchange="loadTemplate()">
    <option value="">-- 选择接口 --</option>
    <option>regist</option>
    <option>login</option>
    <option>friendApply</option>
    <option>friendAccept</option>
    <option>loadFriend</option>
    <option>scanFriend</option>
    <option>loadApply</option>
    <option>loadAcceptList</option>
    <option>privateListen</option>
    <option>privateSend</option>
    <option>loadHistory</option>
    <option>groupChat</option>
    <option>createGroup</option>
    <option>notice</option>
    <option>changeGroupname</option>
    <option>infoSync</option>
    <option>loadGroup</option>
  </select>
  <button onclick="sendRequest()">发送</button>
  <button onclick="clearLog()">清空日志</button>

  <h3>请求数据 JSON:</h3>
  <textarea id="dataInput">{}</textarea>

  <h3>服务器响应:</h3>
  <pre id="log"></pre>

  <script>
    const socket = io("http://127.0.0.1:5000");  // 替换为你的服务器地址

    const templates = {
      "regist": {
        "username": "alice",
        "password": "123456"
      },
      "login": {
        "username": "alice",
        "password": "123456",
        "did": "did:p2p_did_chat:Pf5WlFjC09"
      },
      "friendApply": {
        "data": {
          "id": "did:p2p_did_chat:bob",
          "name": "Bob"
        }
      },
      "friendAccept": {
        "data": {
          "id": "did:p2p_did_chat:bob",
          "name": "Bob"
        }
      },
      "loadFriend": {
        "sender": "did:p2p_did_chat:example"
      },
      "scanFriend": {},
      "loadApply": {},
      "loadAcceptList": {},
      "privateListen": {},
      "privateSend": {
        "receiverId": "did:p2p_did_chat:bob",
        "message": "你好，Bob！",
        "timestamp": Date.now()
      },
      "loadHistory": {
        "id": "did:p2p_did_chat:bob",
        "type": "friend"
      },
      "groupChat": {
        "sender": "did:p2p_did_chat:alice",
        "receiver": "did:p2p_did_chat:group_123",
        "data": {
          "msg_type": "text",
          "message": "大家好！",
          "timestamp": Date.now()
        }
      },
      "createGroup": {
        "sender": "did:p2p_did_chat:alice",
        "receiver": ["did:p2p_did_chat:bob", "did:p2p_did_chat:eve"],
        "data": {
          "timestamp": Date.now()
        }
      },
      "notice": {
        "sender": "did:p2p_did_chat:alice",
        "group_id": "group_123",
        "groupname": "p2p",
        "data": {
          "message": "请注意开会！"
        }
      },
      "changeGroupname": {
        "data": {
          "group_id": "group_123",
          "new_name": "新的群聊名"
        }
      },
      "infoSync": {
        "data": {
          "my_did": "did:p2p_did_chat:alice",
          "modules": ["friend", "group"]
        }
      },
      "loadGroup": {
        "sender": "did:p2p_did_chat:alice"
      }
    };

    socket.on("connect", () => {
      log(`✅ 已连接: ${socket.id}`);
    });

    socket.on("disconnect", () => {
      log("❌ 连接断开");
    });

    socket.on("client", (response) => {
      log("📥 收到服务器响应:");
      log(JSON.stringify(response, null, 2));
    });

    function sendRequest() {
      const action = document.getElementById("actionSelect").value;
      let data;
      try {
        data = JSON.parse(document.getElementById("dataInput").value);
      } catch (e) {
        alert("JSON 格式错误：" + e.message);
        return;
      }

      const request = { action, ...data };
      log("📤 发送请求:");
      log(JSON.stringify(request, null, 2));
      socket.emit("server", request);
    }

    function loadTemplate() {
      const action = document.getElementById("actionSelect").value;
      if (templates[action]) {
        document.getElementById("dataInput").value = JSON.stringify(templates[action], null, 2);
      } else {
        document.getElementById("dataInput").value = "{}";
      }
    }

    function log(msg) {
      const logArea = document.getElementById("log");
      logArea.textContent += msg + "\n";
      logArea.scrollTop = logArea.scrollHeight;
    }

    function clearLog() {
      document.getElementById("log").textContent = "";
    }
  </script>
</body>
</html>
